<template>
  <div>
    <el-dialog
        v-model="dialogVisible"
        fullscreen>
      <div style="height: 100vh;" class="logic-flow-view">
        <SnakerFlowDesigner ref='designer' :viewer="false" v-model="flowDataRef" @on-save="handleSave" :showDoc="false" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineExpose,defineModel, nextTick } from 'vue'
import SnakerFlowDesigner from '@/SnakerFlowDesigner'
import demojson from './demo.json'
import { wfProcessDesignContentUpdate } from "@/api/wf/processDesign.js"
const { proxy } = getCurrentInstance();

// const modelValue = defineModel();

const dialogVisible = ref(false);
const flowDataRef = ref({})
const designer = ref(null)

const props = defineProps({
  record: {
    type: Object,
    required: false
  }
})

onMounted(() => {
  // flowDataRef.value = props.flowData
})

function handleSave(savedata){
  console.log('打印保存数据', savedata)
  console.log('打印props.record', props.record)
  const json = savedata.json
  const data = {
    name: json.name,
    // displayName: json.displayName,
    // instanceUrl: json.instanceUrl,
    // id: props.record.id
    processDesignId: props.record.id,
    ...json,
    type: props.record.type
  }
  wfProcessDesignContentUpdate(data)
  .then(response=> {
    proxy.$modal.msgSuccess("保存成功");
  })

}

function handleCloseModal(){
  dialogVisible.value = false
}

function show(flowData) {
  flowDataRef.value = {};
  flowDataRef.value = flowData;
  console.log('设置flowDataRef为', flowData)
  dialogVisible.value = true;
}

// 只会调用一次
// console.log('是不是每次打印', props.flowData)

defineExpose({
  show
})

</script>

<style scoped>
.logic-flow-view {
  height: 100vh;
  position: relative;
}
</style>
